<template>
	<view>
		<b-navigator :active-index="activeIndex"></b-navigator>
		<view class="main">
				<match-media :min-width="768">
			  <el-radio-group v-model="tabPosition" size="large" text-color='#fff' fill='#ea6101' style="margin-bottom: 30px" @change="radioChange">
			    <el-radio-button v-for="(item, index) in radioList" :value="item.value">{{item.name}}</el-radio-button>
			  </el-radio-group>
			  </match-media>
			  <match-media :max-width="768">
				   <u-sticky bgColor="#fff">
				  <u-tabs :list="radioList" @click="radioPChange"></u-tabs>
				  </u-sticky>
			  </match-media>
		</view>
		<view class="main">
				  <view class="product-list-wrap">
				  	<view v-for="(item, index) in videoList" class="product-card" :key="index">
							<view class="image-wrap">
								<video class="video" width="100%" height="300px" controls="controls" 
								:src="baseUrl + item.fileUrl"></video>
								</view>
							<view class="product-des-wrap">
								<view class="product-title">{{ item.name }}</view>
							</view>
			
				  	</view>
				  	<view style="width: 31%;height: 0;overflow: visible;margin-right: 20px;"></view>
				  </view>
		</view>
		<b-footer></b-footer>
	</view>
</template>

<script>
	import bNavigator from '../../components/b-navigator.vue'
	import bFooter from '../../components/b-footer.vue'
	import { baseUrl } from '../../config/config'
	import { videoList, getDicts } from '../../config/api'
	export default {
		components: { bNavigator, bFooter },
		data() {
			return {
				activeIndex: '/pages/video/index',
				tabPosition: '1',
				radioList: [
					{name: '养生器具', value: '1'},
					{name: '养生图片1',value: '2'},
					{name: '养生图片222',value: '3'},],
				videoList: [{ name: 'ccc'}],
				baseUrl: baseUrl.slice(0,baseUrl.length-1)
			}
		},
		onLoad() {
			const Params = {
				type: '1',
				pageNum: this.currentPage,
				pageSize: this.pageSize
			}
			this.getDictData()
			this.getVideoList(Params)
		},
		methods: {
			getDictData() {
				getDicts('yl_video_type').then(res => {
					this.radioList = res.data.map(p => ({ name: p.dictLabel, value: p.dictValue}))
				})
			},
			getVideoList(Params) {
				videoList(Params).then(res => {
					this.videoList = res.rows
				
					this.total = res.total
				
				})
			},
			radioChange(value) {
				const Params = {
					type: value,
					pageNum: this.currentPage,
					pageSize: this.pageSize
				}
				this.getVideoList(Params)
			},
			radioPChange(item) {
				const Params = {
					type: item.value,
					pageNum: this.currentPage,
					pageSize: this.pageSize
				}
				this.getVideoList(Params)
			}
		
		}
	}
</script>

<style>
.product-list-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	box-sizing: border-box;

	.product-card {
		width: calc((65%) / 3);
		height: 280px;
		border-radius: 4px;
		background-color: #ffffff;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;



		&:nth-child(n + 5) {
			margin-bottom: 0;
		}

		.image-wrap {
			height: 250px;
			overflow: hidden;

			image {
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
				transition: all 0.3s linear;
				width: 100%;
				height: 250px;
			}
		}

		.product-des-wrap {
			display: flex;
			flex-direction: column;
			padding: 2px;

			.product-title {
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 0px;
			}

			.product-des {
				color: #888888;
				font-size: 16px;
			}
		}

	/* 	&:hover {
			background-color: #ea6101;

			image {
				transform: scale(1.1);
			}

			.product-des-wrap {
				color: #ffffff;

				.product-des {
					color: #ffffff;
				}
			}
		} */
	}
}

@media screen and (max-width: 960px) {
	.main {
		display: block;
	}

	.product-list-wrap {
		flex-direction: column;

		.product-card {
			margin-right: 0px;
			margin-bottom: 20rpx;
			width: 93%;
			height: 330rpx;

			.image-wrap {
				height: 250rpx;

				video {
					height: 250rpx;
				}
			}

			.product-des-wrap {
				padding: 10rpx;

				.product-title {
					font-size: 16px;
				}

				.product-des {
					display: none !important;
				}
			}
		}
	}
}
</style>
